@import "@/common/constants/StyleConst.scss";

.editableTable-container {
  height: inherit;
  position: relative;

  .table-title {
    color: #556282;
    font-size: 18px;
    font-weight: 700;
    position: absolute;
    transform: translateY(-100%);
    top: -10px;
    left: 10px;
  }

  .theme--light.v-data-table.table {
    height: inherit;
    border-radius: 8px;
    background-color: unset;

    // &.propRounded {
    //   :deep .v-data-table__wrapper {
    //     border-radius: unset;
    //   }
    // }

    &.rounded-header {
      :deep .v-data-table__wrapper {
        table {
          tr {
            border-radius: 8px;

            th:first-child,
            td:first-child {
              border-top-left-radius: inherit;
              border-bottom-left-radius: inherit;
            }

            th:last-child,
            td:last-child {
              border-top-right-radius: inherit;
              border-bottom-right-radius: inherit;
            }
          }
        }
      }
    }

    &:not(.rounded) {
      border-radius: unset;

      :deep .v-data-table__wrapper {
        border-radius: unset;
      }
    }

    :deep .v-data-table__wrapper {
      border-radius: 8px 8px 0 0;
      height: 100%;

      table {
        max-height: 100%;
        overflow-y: scroll;
        overflow-y: overlay;

        thead {

          tr {

            th {
              background-color: $color-theme-lightgrey;
              border-bottom: unset;
              box-shadow: unset;
              color: $color-theme-grey;
              font-size: $font-xxs;
              height: 40px;
              line-height: 16px;
            }
          }
        }

        tbody {
          height: calc(100% - 40px);

          tr {
            color: $color-theme-grey;

            &.v-row-group__header {
              .table-header {
                text-align: left;
              }
            }

            td {
              font-size: $font-xxs;
              border-bottom: unset;

              .action {
                visibility: hidden;
                text-align: right;

                .icon::before {
                  font-size: 16px;
                  font-weight: 700;
                }
              }

            }

            &:hover {

              .action {
                visibility: visible;
              }
            }
          }

        }
      }
    }
  }
}